<!-- 登录页面 -->
<template>
  <div class="login-container">
    <van-nav-bar
      title="注册 | 登录"
      left-arrow
      @click-left="$router.replace($route.query.redirect || '/')"
    />

    <div class="logo">
      <van-image
        round
        width="100"
        height="100"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />
    </div>

    <!-- 登录表单 -->
    <van-form
      @submit="onLogin"
      @failed="onFailed"
      :show-error="false"
      :show-error-message="false"
      validate-first
      ref="login-form"
    >
      <van-field
        v-model="user.mobile"
        icon-prefix="iconfont"
        left-icon="iconfont icon-shouji"
        :rules="formRules.mobile"
        placeholder="请输入手机号"
        name="mobile"
        center
      />
      <van-field
        v-model="user.code"
        clearable
        icon-prefix="iconfont"
        left-icon="iconfont icon-yanzhengma"
        placeholder="请输入验证码"
        name="code"
        center
      >
        <template #button>
          <van-count-down
            v-if="isCountDownShow"
            :time="10000"
            format="ss s"
            @finish="isCountDownShow = false"
            auto-start
          />

          <van-button
            v-if="!isCountDownShow"
            class="code-btn"
            size="mini"
            type="primary"
            round
            native-type="button"
            @click="onSendSms"
            :loading="isSendSmsLoding"
            loading-type="spinner"
            >发送验证码
          </van-button>
        </template>
      </van-field>
      <div class="login-btn">
        <van-button type="primary" block>登录</van-button>
      </div>
    </van-form>
  </div>
</template>
  
<script>
import { login, sendSms } from "../../api/user";
import { mapMutations } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      user: {
        mobile: "13659878311",
        code: "246810",
      },
      formRules: {
        mobile: [
          { required: true, message: "请输入手机号" },
          {
            pattern: /^1[0-9]{10}$/,
            message: "手机号格式错误",
          },
        ],
        code: [
          { required: true, message: "请输入验证码" },
          {
            pattern: /^\d{6}$/,
            message: "验证码格式错误",
          },
        ],
      },
      isCountDownShow: false,
      isSendSmsLoding: false, //发送验证码按钮的loding
    };
  },
  methods: {
    // 表单验证成功后登录
    async onLogin() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      try {
        const { data } = await login(this.user);
        this.$toast.success("登录成功");
        this.$store.commit("setUser", data.data);

        this.$store.commit("removeCachePage", "LayoutIndex");
        this.$router.replace(this.$route.query.redirect || "/");
      } catch (error) {
        console.dir(error);
        this.$toast.fail("登陆失败");
      }
    },

    // 表单验证失败回调
    onFailed(errorInfo) {
      if (errorInfo.errors[0]) {
        this.$toast({
          message: errorInfo.errors[0].message,
          position: "top",
        });
      }
    },

    // 请求发送验证码
    async onSendSms() {
      try {
        // 验证表单项是否准确
        await this.$refs["login-form"].validate("mobile");

        //获取验证码接口失效
        // const res = await sendSms(this.user.mobile);
        this.isSendSmsLoding = true;
        setTimeout(() => {
          this.isCountDownShow = true;
          this.isSendSmsLoding = false;
        }, 2000);
      } catch (err) {
        let msg = "";
        if (err && err.request && err.request.status == 404)
          msg = "验证码发送失败";
        else if (err && err.message) msg = err.message;
        this.$toast({
          message: msg,
          position: top,
        });
      }
    },
  },
};
</script>

<style lang= "less" scoped>
.logo {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.code-btn {
  width: 80px;
  height: 25px;
  padding: 0 10px;
  background-color: rgb(236, 236, 236);
  color: rgb(69, 69, 69);
  border: none;
}
.login-btn {
  padding: 30px 25px;
  .van-button {
    background-color: rgba(109, 179, 251);
    border: none;
    font-size: 18px;
  }
}
</style> 